/*
 * @Descripttion:
 * @version:
 * @Author: congsir
 * @Date: 2023-10-20 21:45:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-10-24 22:29:15
 */
import React, { memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

import { fetchHomeDataAction } from "@/store/modules/home";
import { HomeWrapper } from "./style";
import HomeBanner from "./c-cpns/home-banner";
import SectionHeader from "@/components/section-header";
import RoomItem from "@/components/room-item";

export default memo(function Home() {
  const { goodPriceInfo } = useSelector(
    (state) => ({
      goodPriceInfo: state.home.goodPriceInfo,
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchHomeDataAction());
  }, [dispatch]);
  return (
    <HomeWrapper>
      <HomeBanner />
      <div className="content">
        <SectionHeader
          title={goodPriceInfo.title}
          subtitle={goodPriceInfo.subtitle}
        />
        <ul className="room-list">
          {goodPriceInfo.list?.slice(0, 8)?.map((item) => {
            return <RoomItem itemData={item} />;
          })}
        </ul>
      </div>
    </HomeWrapper>
  );
});
